<template>
	<view class="wrap-item flex align-center just-between row-item" v-if="item">
		<view class="title-bg f-30 flex">
			<view class="must" v-if="item.require">*</view>

			<view class="title">{{ item.title }}</view>
		</view>

		<view class="wrap-right flex align-center just-end" @click="onChooseLocation">
			<input
				class="input f-30 text-right"
				:placeholder="item.place"
				placeholder-class="place"
				:value="value"
				disabled
			/>

			<image class="camera" :src="$staticImagePath(locationImg)" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
			/**
			 * 定位图片
			 */
			locationImg: {
				type: String,
				default: "common/location.png",
			},
			/**
			 * 经纬度
			 */
			lat: {
				type: String,
				default: "",
			},
			lng: {
				type: String,
				default: "",
			},
		},
		methods: {
			/**
			 * 选择位置
			 */
			onChooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						var address = this.$filters.onHandleAddress(res.address);
						this.$emit("input", address.slice(0, 3).join("/"));
						this.$emit("update:lat", res.latitude);
						this.$emit("update:lng", res.longitude);
					},
				});
			},
		},
	};
</script>

<style>
	@import "@/css/publish.css";

	.wrap-right {
		gap: 10rpx;
	}
</style>
